<template>
  <div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>消息</el-breadcrumb-item>
          <el-breadcrumb-item>已读消息</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 卡片视图 -->
      <el-card>
          <el-table :data="messageList" border stripe>
              <el-table-column type="index"></el-table-column>
              <el-table-column label="消息来自" prop="fromId"></el-table-column>
              <el-table-column label="消息内容" prop="content"></el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.currentPage"
          :page-sizes="[2, 4, 8, 10]"
          :page-size="queryInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
          </el-pagination>
      </el-card>
  </div>
</template>

<script>
export default {
  data () {
      return {
          messageList: [],
          queryInfo: {
              pageSize: 4,
              currentPage: 1,
              status: 1
          },
          total: 0
      }
  },
  created () {
      this.getList()
  },
  methods: {
      async getList () {
          const { data: res } = await this.$http.get('/message/history', { params: this.queryInfo })
          console.log(res)
          if (res.code !== 100) {
              return this.$message.error('获取消息列表失败！')
          }
          this.messageList = res.extend.result.list
          this.total = res.extend.result.total
          console.log(this.messageList)
      },
      handleSizeChange (newSize) {
          this.queryInfo.pageSize = newSize
          this.getList()
      },
      handleCurrentChange (newPage) {
          this.queryInfo.currentPage = newPage
          this.getList()
      }
  }
}
</script>
